<template>
  <div class="content-display-box">
    <main-guide-bar class="phone-guide-item"/>
    <content-guide-bar class="pc-guide-item"/>
    <!--内容展示视口-->
    <div class="content-box">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import ContentGuideBar from "@/components/ContentGuideBar";
import MainGuideBar from "@/components/MainGuideBar";

export default {
  name: "ConcreteContentDisplayTemplate",
  components: {
    ContentGuideBar,
    MainGuideBar

  }
}
</script>

<style lang="less" scoped>
//pone
@media only screen and (max-width: 576px) {
  @width: 100vw;
  @min-height: 100vh;
  .content-display-box {
    overflow-x: hidden;

    .phone-guide-item {

    }

    .pc-guide-item {
      display: none;
    }

  }
}

//pc
@media only screen and (min-width: 576px) {
  @width: 100vw;
  @min-height: 100vh;
  .content-display-box {
    overflow-x: hidden;

    .phone-guide-item {
      display: none;
    }

    .pc-guide-item {
        height: 70px;
    }

    .content-box {

    }
  }
}

</style>
